<template>
    <div id="page">
        <div id="topmenu" style="padding-left: 200px;align-items: center;justify-content: center;">
            <ul style="list-style: none;float: right;margin-right: 20px;" class="top-nav">
                <li style="display: flex;"><span style="margin-left: 4px;"
                                                 onclick="window.location.href='/logout.html'">退出登陆</span></li>
            </ul>
        </div>
        <div id="user-info" v-cloak
             style="position: absolute;width: 200px;height: 50px;color: #ffffff;align-items: center">

            <div style="margin-top: 30px;text-align: center;cursor: pointer;" @click="showStatus=true"><img src="/imgs/default.png" width="30px"
                                                                                   alt=""/>
                <span style="margin: 0 8px;">{{user.userName}}</span>
                <template v-if="userState >= 0">
                    <span class="user-state" :class="userState == 0?'green':userState == 1?'yellow':'red'"></span>
                </template>
            </div>
            <div v-focus tabindex="-1" v-if="showStatus" @blur="showStatus = false"
                 style="outline: none;color: rgb(51, 51, 51);left: 90px;top: 60px;border-radius: 4px;position: absolute;width: 80px;border: 1px solid rgb(247, 247, 247);background-color: white;z-index: 2;font-size: 12px;">
                <div @click="updateUserState(0)" style="cursor: pointer;margin-top: 4px;"><span
                        class="user-state green"></span>在线
                </div>
                <div @click="updateUserState(1)" style="cursor: pointer;margin-top: 4px;"><span
                        class="user-state yellow"></span>离开
                </div>
                <div @click="updateUserState(2)" style="cursor: pointer;margin: 4px 0;"><span
                        class="user-state red"></span>免打扰
                </div>
            </div>
        </div>
        <Sidebar></Sidebar>
        <div id="userbar" v-if="$route.name != 'setting'"
             style="height: calc(100% - 30px);width: calc(100% - 200px);background-color: #f7f7f7;position: absolute;left: 200px;top: 30px;border-top-left-radius: 8px;">
            <router-view :user="user"></router-view>
        </div>
    </div>
</template>

<script>

    import Sidebar from '@/components/Sidebar'
    export default {
        name: 'Chat',
        data () {
            return {
                showStatus:false,
                userState:-1,
                user: {userName: '-'}
            }
        }, directives: {
            focus: {
                inserted: function (el) {
                    el.focus()
                }
            }
        },
        components: {Sidebar},
        methods: {
            updateUserState:function (state) {
                const that = this;
                $.post('/support/state/update',{state:state},function (result) {
                    that.userState = state;
                    that.showStatus = false
                });
            }
        },
        mounted(){
            let that = this;
            $.post('/session/info', {}, function (result) {
                that.user = result;
            });

            $.post('/support/state/get',{},function (result) {
                that.userState = result;
            });
        },
    }
</script>

<style scoped>
    .user-state{
        margin: 0 8px;  width: 10px; height: 10px; display: inline-block; border-radius: 10px;
    }

    .user-state.red{
        margin: 0 8px; background-color: rgb(214,31,16); width: 10px; height: 10px; display: inline-block; border-radius: 10px; border: 1px solid #ff6f6f;
    }
    .user-state.yellow{
        background-color: #fbdf44; border: 1px solid rgb(239, 187, 93);
    }
    .user-state.green{
        background-color: rgb(29, 214, 29);border: 1px solid rgb(160, 255, 160);
    }
</style>
